<!--默认布局块-->
<template>
  <div class="default-layout-item-container"
       :style="Object.assign({
         borderWidth: layoutItem.layoutItemConfigData.borderWidth + 'px',
         borderStyle: layoutItem.layoutItemConfigData.borderStyle,
         borderColor: layoutItem.layoutItemConfigData.borderColor,
         borderTopLeftRadius: layoutItem.layoutItemConfigData.borderTopLeftRadius + 'px',
         borderTopRightRadius: layoutItem.layoutItemConfigData.borderTopRightRadius + 'px',
         borderBottomLeftRadius: layoutItem.layoutItemConfigData.borderBottomLeftRadius + 'px',
         borderBottomRightRadius: layoutItem.layoutItemConfigData.borderBottomRightRadius + 'px',
         backgroundColor: layoutItem.layoutItemConfigData.backgroundColor,
         padding: layoutItem.layoutItemConfigData.padding + 'px',
         boxShadow: boxShadow,
         transform: buildLayoutItem2dTransformStyleValue(layoutItem)
       }, $PnUtil.cssToVueStyleObj(layoutItem.layoutItemConfigData.customStyleCode))">
    <div class="default-layout-item-mask-layer" v-if="isLoaded">
      <div class="loader"></div>
    </div>
    <slot></slot>
  </div>
</template>

<script>

  const _this = {
    name: 'DefaultLayoutItem',
    props: {
      layoutItemId: {
        type: String,
        require: true,
        default: ''
      },
      toggleIsLoaded: { // 此处传入布局块绑定组件的ID，当设计器中点击重载组件时，ID值会被设置为空字符，这时候通过watch此属性来显示加载状态
        type: String,
        default: ''
      }
    },
    provide() {
      return {
        inLoading: () => {
          if (this.firstLoadingFinished == false) {
            this.isLoaded = true
            this.firstLoadingFinished = true
          }
        },
        outLoading: () => {
          this.isLoaded = false
        }
      }
    },
    attr: {
      configDataTemp: {

      }
    },
    data() {
      return {
        isLoaded: false, // 是否处于加载状态
        firstLoadingFinished: false, // 是否完成首次加载
      }
    },
    created() {

    },
    mounted() {

    },
    methods: {
      /**
       * 构建2d旋转样式
       * @param layoutItem
       * @returns {string}
       */
      buildLayoutItem2dTransformStyleValue (layoutItem) {
        let style = 'rotate(' + layoutItem.layoutItemConfigData.rotationAngle + 'deg)';
        if (layoutItem.layoutItemConfigData.flipHorizontal && layoutItem.layoutItemConfigData.flipVertical) {
          style += ' scaleX(-1) scaleY(-1)'
        }else if (layoutItem.layoutItemConfigData.flipHorizontal && !layoutItem.layoutItemConfigData.flipVertical) {
          style += ' scaleX(-1)'
        }else if (!layoutItem.layoutItemConfigData.flipHorizontal && layoutItem.layoutItemConfigData.flipVertical) {
          style += ' scaleY(-1)'
        }
        return style
      },
    },
    computed: {
      layoutItem() {
        if(this.$store.state.release.pageMetadata) {
          return this.$store.getters['release/getLayoutItemById'](this.layoutItemId)
        }else {
          return this.$store.getters['designer/getLayoutItemById'](this.layoutItemId)
        }
      },
      /**
       * 构建鼠标滑入背景色样式（弃用）
       * @returns {{}}
       */
      styleObject() {
        let obj = {};
        if (this.layoutItem.layoutItemConfigData.backgroundColorHover) {
          obj['--background-color-hover'] = this.layoutItem.layoutItemConfigData.backgroundColorHover
        }else {
          obj['--background-color-hover'] = this.layoutItem.layoutItemConfigData.backgroundColor
        }
        return obj
      },
      boxShadow() {
        let style = this.layoutItem.layoutItemConfigData.boxShadowLeft + 'px' + ' ' +
          this.layoutItem.layoutItemConfigData.boxShadowTop + 'px' + ' ' +
          this.layoutItem.layoutItemConfigData.boxShadowRadius + 'px' + ' ' +
          this.layoutItem.layoutItemConfigData.boxShadowColor;

        if (this.layoutItem.layoutItemConfigData.boxShadowInset) {
          style = 'inset ' + style
        }
        return style
      }
    },
    watch: {
      toggleIsLoaded: {
        handler: function (val, oldVal) {
          if (!val) {
            let arr = ['api','database','csv']
            if (this.layoutItem.component.compConfigData) {
              arr.indexOf(this.layoutItem.component.compConfigData.ds_type) > -1 ? this.isLoaded = true : undefined
            }
          }
        }
      }
    }
  };

  export default _this
</script>

<style lang="less" scoped>
  .default-layout-item-container {
    width: 100%;
    height: 100%;
  }

  .default-layout-item-mask-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(66,66,66,0.5);
    z-index: 9999;
    .loader {
      display: inline-block;
      position: absolute;
      width: 6px;
      height: 10px;
      animation: rectangle infinite 1s ease-in-out -0.2s;
      background-color: #fff;
      left: 50%;
      top: 50%;
      margin-top: -5px;
      margin-left: -3px;
    }
    .loader:before,
    .loader:after {
      position: absolute;
      width: 6px;
      height: 10px;
      content: "";
      background-color: #fff;
    }
    .loader:before {
      left: -10px;
      animation: rectangle infinite 1s ease-in-out -0.4s;
    }
    .loader:after {
      right: -10px;
      animation: rectangle infinite 1s ease-in-out;
    }
    @keyframes rectangle {
      0%,
      80%,
      100% {
        height: 10px;
        box-shadow: 0 0 #fff;
      }
      40% {
        height: 20px;
        box-shadow: 0 -10px #fff;
      }
    }
  }
</style>
